<template>
  <div class="vuex-test">
    <h2>vuex测试-组件2</h2>
    <p>{{obj?.aaa}}</p>
    <p>{{objItemx?.aaa}}</p>
    <p>{{objItem2?.aaa}}</p>
    <p>{{strItem}}</p>
    <h3>总结</h3>
    <p>vuex里的值是响应式的全局变量，一个地方修改，其他用到地方的值也会跟着改。</p>
    <p>this.$store.state.testx.obj获取vuex的值，也是响应式的。更改值，视图上内容也是响应式变化。</p>
    <p>为了保证所有的状态变更都能被调试工具跟踪到，不建议直接修改vuex里的值。</p>
    <p>vue开启严格模式时，无论何时发生了状态变更且不是由mutation函数引起的，将会抛出错误。</p>
    <p>不是由mutation函数更新值，包括直接改和action里直接改。</p>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  export default {
    name: 'vuextest',
    data() {
      return {
        obj: this.$store.state.testx.objItem
      };
    },
    computed: {
      // 用mapGetters需要在store里配置getters
      ...mapGetters('testx', ['strItem', 'objItemx', 'objItem2'])
    },
    methods: {}
  };
</script>

<style lang="scss" scoped>
  .vuex-test {
    position: relative;
  }
</style>
